<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 14:05:02
 * @LastEditors: Freude Xu
 * @LastEditTime: 2021-09-23 19:24:29
-->
<template>
  <div>
    <!-- 头部 -->
    <Header />
    <!-- /头部 -->
    <!-- 体部 -->
    <!-- 文章的内容页面 -->
    <div class="content">
      <!-- 居中 -->
      <div class="wrapper">
        <!-- {{article}} -->
        <div class="article">
          <!-- 加载文章的内容 -->
          <p class="back" @click="toJump()">👈返回</p>
          <div class="article_content" >
            <div class="ctitle">{{articleList.title}}</div>
            <div class="ctime">
              <!-- 发表时间 -->
              <span>发布时间：{{articleList.publishTime | fmtDate}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <!-- 浏览次数 -->
              <span>阅读次数：{{articleList.readTimes}}</span>
            </div>
            <div class="cbody" v-html="articleList.content">{{articleList.content}}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- /体部 -->
    <!-- 底部 -->
    <Footer />
    <!-- /底部 -->
  </div>
</template>
<script>
  import {
    get
  } from '../utils/request'
  import Header from "../components/Header.vue"
  import Footer from "../components/Footer.vue"
  export default {
    components: {
      Header,
      Footer
    },
    data() {
      return {
        articleList:{},
        id:0
      }
    },
    //监听器
    watch: {
      '$route.query': {
        // handler中存放需要监听的属性
        handler(query) {
          // 参数发生变化进行重新赋值
          this.articleList = query;
          // 赋值之后在重新加载
          this.loadArticleList();
        },
        deep: true
      }
    },
    created() {
      //获取list传过来的id
      this.id=this.$route.query.id;
      this.loadArticleList();
    },
    methods: {
      //加载文章详情页
      loadArticleList(){
        let url='/index/article/findById';
        get (url,{id:this.id}).then(res=>{
          this.articleList=res.data;
        })
      },
      toJump(){
        this.$router.push({
          path:'/list'
        })
      },
      toLoadOther(item){
        this.$router.push({
          path:'/article',
          query:item
        })
      }
    }
  }
</script>
<style lang="scss">
  // 体部的样式
  .content {
    background: url(../assets/resource/img/bg.jpg) no-repeat ;;
    .article {
      flex-direction: row;
      flex-wrap: nowrap;
      padding:2em 0;
      position: relative;
    }
    .back{
      position: absolute;
      cursor: pointer;
      color: brown;
      font-size: 18px;
      left: 6em;
    }
    .back:hover{
      color: #f3b702;
    }
    .article_content {
      width: 80%;
      margin: 0 auto;
      background-color: #fff;
      flex: 1;
      padding:2em;
      border: 10px double #8f000b;
        .ctitle{
          color:#8f000b;
          font-size: 30px;
          font-weight: bold;
          text-align: center;
        }
        .ctime{
          text-align: center;
          margin:2em;
        }
    }
  }
</style>